Shadowbox es un visor para medios de comunicación, quizás nos suene más si decimos que se trata de una ventana modal donde podemos mostrar casi cualquier tipo de formato, imágenes, QuickTime, Windows Media Player, Flash, vídeo Flash, HTML y páginas web externas. Resulta muy elegante porque carece de marcos y puede adaptarse a cualquier diseño de blog.
Para utilizar Shadowbox debemos añadir a la plantilla
shadowbox.js lo descargamos y lo alojamos en un servidor para obtener la url.
Paso 1º
En plantilla edición de HTML justo después de
]]></b:skin> añadimos lo siguiente:
<script src='url-archivo-shadowbox.js' type='text/javascript'/>
En
url-archivo-shadowbox.js lo sustituimos por la url que obtenemos al alojar el archivo en nuestro alojamiento.
Paso 2º
Justo después añadimos:
<script type='text/javascript'>
Shadowbox.init();
</script>
Paso 3º
A continuación los estilos:
<style type='text/css'>
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLVNr2Qo7RobaiBu1AMqqxS9fLutc80PSaurShMbJnZmj4BB39QKUYTS5VW_FEeOUjRMJ7cS2E7FJuXloM0jw0Xc0-URcOwk_FIkdk2UeQhCvoigZSX41PBf0kPEw1LdeZUf6/s1600/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAshPWM9Dtpb7bT0ecym_7mn5L9K-Rhc8Mu97lgKq9eN3VNfN1vIFKpzYJnDCGxQDSQVyffkf1VnO1pvpgSyoQ_O8PH1Y_SxBQdFZhgTON-ExchCcmB1PoeITMkVXtFLMJ57z9/s1600/close.p);}
#sb-nav-next{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg52IVziW_T7FFwuvr3-tRUDLuIeiePb_b_gRSiB9ZeS_inNtZA85J8102xqbg8bMyI-VgFQhBNmGIDaRWGiWcFBdWdKItf_4o0QXd7Dbe2FKZHAAATkWiwmhx6TGNv6mQkgtKH/s1600/next.png);}
#sb-nav-previous{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG64Rr4ErwFta3XNWv3rN2mHfPngbE_2pSpsZZ-xtna8fN2prwtW5Xoj6kmGgLumGW31TwVv1UwHCNzgTv-17PXLjcp_UJW6yYbQOOM1H_tdvni8SV5kKGXsvXt2sLTT8DiUEB/s1600/previous.png);}
#sb-nav-play{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMgblJfPQNTt0VfbTNwy2ICJvbzTXb2tXYQ11fjNT_Htk3D2q-nlVb_S9mlYTWRISOItJeLEERP7OeV3NkXkzl5WC3GJrh_w6WHxAhpVVI0YCBibA_95U3BV-i18mNWPWbY4i/s1600/play.png);}
#sb-nav-pause{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWQDbDrw2UFfiPQi9TLl8RRsgkkmU5MOD_7APbGjITOBUUFrRhi7G7S8Cc5ofbanJMRfeuo2yG2fPtok8GK_K8zDHodjYjzRsgqX-spSUbpNWzPtVxn0Vj8MM0aAWAvIX_fBd/s1600/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
</style>
Antes de seguir, comentar la opción de añadir shadowbox.js directamente a la plantilla, con ese paso evitamos alojar el archivo en un servidor externo.
Si optamos por añadirlo en la plantilla lo que haremos será copiar el contenido de este
archivo y pegarlo tal y como se indica en el paso 1º es decir, justo después de
]]></b:skin> y nos olvidamos de añadir el archivo externo.
Imagen única
Click en imagen
<a rel="shadowbox" title="
Título" href="
Url-imagen-grande"><img src="
Url-miniatura"/></a>
Si no queremos retocar la imagen para obtener la miniatura también podemos establecer la medida para mostrarla y utilizar la misma url. Esta última opción no es muy recomendable cuando se suben muchas imágenes al blog ya que al hacerlo de esa forma estamos cargando dos veces la misma imagen y a la larga notaremos que la carga es más lenta.
Con
width establecemos anchura y con
height altura
<a rel="shadowbox" title="
Título" href="
Url-imagen-grande"><img src="
Url-miniatura"
height="137"
width="170" /></a>
Si retocamos las imágenes bastará con <img src="Url-imagen"/>
A lo largo de esta entrada encontraremos varias veces que el código para mostrar nuestra ventana modal dice "Texto o imagen" quiere eso decir que podemos mostrar la ventana en enlaces de texto o imágenes.
Si queremos mostrar texto no hay mucha explicación escribimos el texto que hará de enlace y listo. Para mostrar una imagen añadiremos: <img src="Url-imagen"/>
Galería
Click en imagen
<div style="text-align: center;">
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
</div>
Procuraremos añadir todas las líneas seguidas dejando un espacio entre cada código que será la separación entre imágenes.
Cada vez que añadimos una galería le añadimos un nombre distinto, en el ejemplo "DEMO1"
YouTube
Click en imagen
El siguiente sería el código proporcionado por
YouTube para un vídeo:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/
M-QiPebU2F8?fs=1&hl=es_ES"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/M-QiPebU2F8?fs=1&hl=es_ES" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
Esta sería la parte que debemos copiar del código proporcionado por
YouTube y pegarla en nuestro código
M-QiPebU2F8
Y lo mostraríamos así:
<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/
M-QiPebU2F8&rel=0&autoplay=1">
Texto o imagen</a>
Vimeo
Click en imagen
<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=
13536006&autoplay=1">
Texto o imagen</a>
En color rojo la id el vídeo de Vimeo que necesitamos copiar y pegar en nuestro código.
Google
Click en imagen
<a href="http://video.google.com/googleplayer.swf?docid=
8373165428322827115&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Texto o imagen</a>
Animación
Click en imagen
<a rel="shadowbox;width=400;height=300" title="
Título" href="
Url-archivo-.swf">
Texto o imagen</a>
Página externa
Click en imagen
<a rel="shadowbox;width=900;height=300" title="
Página externa" href="
Url-página">
Texto o imagen</a>
8
opiniones
2013
(1)
